import React from 'react';
import util from '@/utils';
import styles from './index.less';

const queryById = async (id: number) => {
   const {data} = await util.request({
      url: `/article/${id}`
   });
   return data;
};
export default (props: { title?: string, content?: string, id?: number }) => {
   const pageState = React.useState<{ title: string, content: string }>();
   React.useEffect(() => {
      if (props.id) {
         queryById(props.id).then(res => {
            pageState[1](res);
            contentRef.current.innerHTML = res.content;
         });
      } else {
         contentRef.current.innerHTML = props.content;
      }
   }, []);
   const contentRef = React.useRef<any>();
   return <div className={styles.page}>
      <h2 className={styles.title}>{props.id ? pageState[0]?.title : props.title}</h2>
      <div ref={contentRef} />
   </div>;
}
